<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="search-list mb-10  d-flex a-items">
        <el-input v-model="searchForm.student_name" placeholder="学生姓名" size="small"
                  class="w-140 mr-10"></el-input>
        <div>
          <component
              v-bind:is="item.propertyType"
              :property.sync="item"
              v-for="(item, index) in getPower"
              :key="index"
              @updateVal="updateVal"
          ></component>
        </div>
        <div class="mr-10">
          <el-select v-model="searchForm.cate_id" placeholder="请假类型" size="small" style="width: 140px">
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in semesterList"
                       :key="index"></el-option>
          </el-select>
        </div>
        <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="请假开始日期"
            end-placeholder="请假结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            size="small"
            class="mr-10"
            :picker-options="pickerOptions1">
        </el-date-picker>
        <el-input v-model="searchForm.day" placeholder="连续请假天数" size="small" class="w-140"></el-input>
        <el-button type="primary" size="small" @click="searchFn('search')" class="ml-10"><i class="el-icon-search"></i>搜索
        </el-button>
        <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
      </div>
      <div class="mb-10">
        <downexcel type="leave" :option="searchForm"></downexcel>
        <el-button size="small" type="primary" :disabled="signImg.length?false:true" plain @click="getLeaveUser()">
          批量签名确认
        </el-button>
        <downexcel type="leaveAbsence" :option="{start_time: value1[0],end_time: value1[1],class_id: searchForm.class_id,section_id: searchForm.section_id}" v-if="value1 && value1[0]" :excelName="excelNameFn()"></downexcel>
        <el-button size="small" :disabled="true" v-else>导出幼儿因病缺勤登记表</el-button>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableStyle.tableStripe"
              :border="tableStyle.tableBorder"
              tooltip-effect="dark"
              header-cell-class-name="table-text-c"
              style="width: 100%"
              @select="handleSelectionChange"
              @select-all="handleSelectionAllChange"
              @row-click="rowClick">
            <el-table-column
                type="selection"
                width="50"
                align="center">
            </el-table-column>
<!--            <el-table-column-->
<!--                label="ID"-->
<!--                align="center"-->
<!--                prop="id"-->
<!--                width="80">-->
<!--            </el-table-column>-->
            <el-table-column
                label="申请人"
                align="center">
              <template slot-scope="scope">
                {{ scope.row.student ? scope.row.student.name : '--' }}
              </template>
            </el-table-column>
            <el-table-column
                prop="purpose"
                label="班级"
                align="center"
                width="80">
              <template slot-scope="scope">
                {{ scope.row.classes ? scope.row.classes.class_name : '--' }}
              </template>
            </el-table-column>
            <el-table-column
                prop="remark"
                label="请假日期"
                width="200"
                align="center">
              <template slot-scope="scope">
                {{ `${scope.row.start_time}至${scope.row.end_time}` }}
              </template>
            </el-table-column>
            <el-table-column
                label="请假天数"
                width="80"
                align="center">
              <template slot-scope="scope">
                {{ `${scope.row.day}天` }}
              </template>
            </el-table-column>
            <el-table-column
                label="类型"
                align="center"
                width="70">
              <template slot-scope="scope">
                {{ scope.row.cate_id ? leaveType[scope.row.cate_id] : '' }}
              </template>
            </el-table-column>
            <el-table-column
                label="病例"
                align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.type == 1">
                  <viewerModle type="2" :imgSrc="scope.row.pic" v-if="scope.row.pic"></viewerModle>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                label="出行/病症"
                align="center"
                width="90">
              <template slot-scope="scope">
                <span v-if="scope.row.type !== 1">{{ scope.row.out_type ? scope.row.out_type : '' }}/</span>
                <span>{{ scope.row.disease ? scope.row.disease : '' }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="content"
                label="请假事由"
                align="center">
            </el-table-column>
            <el-table-column
                label="申请时间"
                align="center"
                prop="create_time">
            </el-table-column>
            <el-table-column
                label="班主任签字"
                align="center">
              <template slot-scope="scope">
                <viewerModle type="1" :imgSrc="scope.row.user_sign" v-if="scope.row.user_sign"
                             :underline="false"></viewerModle>
                <el-link type="danger" v-else>未签</el-link>
              </template>
            </el-table-column>
            <el-table-column
                label="因病报备"
                align="center"
                width="80"
            >
              <template slot-scope="scope">
                <el-link type="success" v-if="scope.row.handle && (scope.row.handle.temperature || scope.row.handle.symptom ||scope.row.handle.handle ||scope.row.handle.feedback)">已填</el-link>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                fixed="right"
                width="180">
              <template slot-scope="scope">
                <el-button size="mini" @click="leaveRemark(scope.row)" plain v-if="scope.row.cate_id==1">
                  因病登记
                </el-button>
                <el-button size="mini" @click="deletefn(scope.row.id)" type="danger" plain>
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <leaveQrcode :visible.sync="leaveVisible" :leaveId="leaveId" @getInit="getInit"></leaveQrcode>
    <sickLeaveRemark :visible.sync="sickVisible" :sickOption="sickOption" @InitFn="InitFn"></sickLeaveRemark>
  </div>
</template>

<script>
import {pagination, tableoption, yeartime} from '@/utils/util.js'
import {leaveIndex, leaveDelete} from '@/api/admin/student_leave'
import leaveQrcode from './components/qrcode'
import sickLeaveRemark from "./components/sickLeaveRemark";

export default {
  components: {
    leaveQrcode,
    sickLeaveRemark
  },
  data() {
    return {
      sickOption: null,
      sickVisible: false,
      radioStatus: 'all',
      handleSelection: [],
      arryList: [], // 页面数据列表
      // 设置table样式
      tableStyle: tableoption,
      value1: [],
      pickerOptions1: {
        disabledDate(time) {
          // return time.getTime() > Date.now() - 8.64e7
        }
      },
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      editForm: {
        name: '', // 	整型 	必填 	1 	- 	名称
      },
      searchForm: {
        student_name: '',
        class_id: '',
        section_id: '',
        end_time: '',
        start_time: '',
        cate_id: '',
        day: ''
      },
      // 1 病假 2 事假 3 基础延迟服务 4 特色延迟服务 5 早退
      semesterList: [
        {
          id: 1,
          name: '病假'
        },
        {
          id: 2,
          name: '事假'
        },
        {
          id: 3,
          name: '基础延时服务'
        },
        {
          id: 4,
          name: '特色延时服务'
        },
        {
          id: 5,
          name: '早退'
        }
      ],
      leaveVisible: false,
      leaveId: 0,
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      signImg: [],
      // 1 病假 2 事假 3 基础延迟服务 4 特色延迟服务 5 早退
      leaveType: {
        1: '病假',
        2: '事假',
        3: '基础延迟服务',
        4: '特色延迟服务',
        5: '早退',
      }
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      let that = this
      // class_id section_id end_time start_time student_name type p
      let dataOption = this.getJson(this.searchForm)
      dataOption.end_time = this.value1 && this.value1.length ? this.value1[1] : '';
      dataOption.start_time = this.value1 && this.value1.length ? this.value1[0] : '';
      dataOption.p = this.page.pageindex
      leaveIndex(dataOption).then(res => {
        console.log(res)
        for (let item of res.list.data) {
          item.create_time = yeartime(item.create_time)
          item.start_time = item.start_time.split(' ')[0]
          item.end_time = item.end_time.split(' ')[0]
          if (item.type === 1 && item.medical_record) {
            item.pic = item.medical_record.split(',')
          }
        }
        this.arryList = res.list.data
        this.page.total = res.list.total
        this.$nextTick(function () {
          that.checked() // 每次更新了数据，触发这个函数即可。
        })
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 搜索组件
    searchFn(option) {
      if (option === 'refresh') {
        this.searchForm.student_name = '';
        this.searchForm = {
          student_name: '',
          class_id: '',
          section_id: '',
          end_time: '',
          start_time: '',
          cate_id: '',
          day: ''
        }
        this.value1 = [];
        let newGetPower = this.getJson(this.getPower)
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPower = newGetPower;
      } else {
        this.searchForm.end_time = this.value1 && this.value1.length ? this.value1[1] : '';
        this.searchForm.start_time = this.value1 && this.value1.length ? this.value1[0] : '';
      }
      this.page.pageindex = 1;
      this.InitFn()
    },
    getLeaveUser() {
      console.log('this.signImg', this.signImg)
      this.leaveId = this.signImg.join(',')
      this.leaveVisible = true
    },
    getInit() {
      this.leaveId = ''
      this.signImg = []
      this.leaveVisible = false
      this.InitFn()
    },
    // 全选
    handleSelectionAllChange(val) {
      console.log('全部数据', val)
      if (val.length) {
        for (let item of val) {
          if (this.signImg.indexOf(item.id) === -1) {
            this.signImg.push(item.id)
          }
        }
      } else {
        for (let item of this.arryList) {
          if (this.signImg.indexOf(item.id) !== -1) {
            this.signImg.splice(this.signImg.indexOf(item.id), 1)
          }
        }
      }
    },
    // 选框
    handleSelectionChange(val, row) {
      let that = this
      if (this.signImg.indexOf(row.id) === -1) {
        this.signImg.push(row.id)
      } else {
        this.signImg.splice(this.signImg.indexOf(row.id), 1)
      }
    },
    // 选择行
    rowClick(row, column, event) {
      let that = this
      if (column.label !== '操作' && column.label !== '病例') {
        if (this.signImg.indexOf(row.id) === -1) {
          this.signImg.push(row.id)
        } else {
          this.signImg.splice(this.signImg.indexOf(row.id), 1)
        }
        this.$nextTick(function () {
          that.checked() // 每次更新了数据，触发这个函数即可。
        })
      }
    },
    // 设置默认选中
    checked() {
      for (let i = 0; i < this.arryList.length; i++) {
        if (this.signImg.indexOf(this.arryList[i].id) !== -1) {
          this.$refs.multipleTable.toggleRowSelection(this.arryList[i], true)
        } else {
          this.$refs.multipleTable.toggleRowSelection(this.arryList[i], false)
        }
      }
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchForm[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchForm[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchForm[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    deletefn(id) {
      let that = this
      this.$confirm('确认删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        leaveDelete({id: id}).then(res => {
          that.InitFn()
        })
      }).catch(() => {
      })
    },
    leaveRemark(option) {
      this.sickOption = JSON.parse(JSON.stringify(option))
      this.sickVisible = true
    },
    excelNameFn(){
      if(this.value1 && this.value1.length){
        return `${this.value1[0].split('-').join('')}至${this.value1[0].split('-').join('')}`
      }
    }
  },
  mounted() {
  },
  // 缓存机制 end
}
</script>

<style scoped>

.wx-user-box-line img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}

.wx-user-box-line {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-wx {
  cursor: pointer;
  padding: 5px;
}

.btn-wx:hover {
  color: #1b8de5;
  text-decoration: underline;
}

.delet-wx {
  color: red;
  cursor: pointer;
}

.delet-wx:hover {
  text-decoration: underline;
}

.tab-body {
  display: flex;
  align-items: center;
}

.tab-box {
  flex: 1;
}

.tab-box-list {
  display: flex;
  align-items: center;
}

.examinBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: red;
}

.examinBtn i {
  font-style: normal;
  color: #1b8de5;
  cursor: pointer;
  font-size: 12px;
}
</style>
